<div class="uk-width-large uk-margin-auto">
    <h2 class="uk-h2 uk-margin-medium-bottom">新建组件</h2>
    <form class="uk-form-stacked"
          [formGroup]="mainForm"
          (keydown.enter)="$event.preventDefault()"
          (ngSubmit)="create()">
        <div class="uk-grid uk-grid-small">
            <div class="uk-width-1-2">
                <div class="uk-margin">
                    <label class="uk-form-label" for="form-group">
                        仓库所属群组
                    </label>
                    <div class="uk-form-controls">
                        <select class="uk-select"
                                formControlName="group"
                                id="form-group">
                            <option value="">无</option>
                            <option *ngFor="let option of groups"
                                    [value]="option.id">
                                {{option.full_name}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="uk-width-1-2">
                <div class="uk-margin">
                    <div class="uk-form-label uk-flex uk-flex-between">
                        <div class="uk-flex uk-flex-between">
                            <label for="repoId">
                                选择仓库
                            </label>
                            <div *ngIf="f.repoId.errors !== null
                                && f.repoId.errors
                                && f.repoId.touched"
                                 class="uk-text-danger"
                                 [ngSwitch]="f.repoId.errors | objectFirstKey">
                                <span *ngSwitchCase="'required'">
                                     必填项
                                </span>
                                <span *ngSwitchCase="'exist'">
                                     该仓库已绑定
                                </span>
                            </div>
                            <a href="#create-project-modal"
                               uk-toggle>
                                新建
                            </a>
                        </div>
                    </div>
                    <div class="uk-form-controls">
                        <select class="uk-select"
                                [class.uk-form-danger]="f.repoId.errors && f.repoId.touched"
                                [class.uk-form-success]="!f.repoId.errors && f.repoId.touched"
                                formControlName="repoId"
                                id="repoId">
                            <option value="">请选择</option>
                            <option *ngFor="let option of projects"
                                    [value]="option.id">
                                {{option.name}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="uk-margin">
            <div class="uk-form-label uk-flex uk-flex-between">
                <div class="uk-flex uk-flex-between">
                    <label for="title">
                        名称
                    </label>
                    <div *ngIf="f.title.errors && f.title.touched"
                         class="uk-text-danger"
                         [ngSwitch]="f.title.errors | objectFirstKey">
                        <span *ngSwitchCase="'required'">
                            请填写组件名称
                        </span>
                        <span *ngSwitchCase="'pattern'">
                            只能输入中文、英文、数字、下划线
                        </span>
                        <span *ngSwitchCase="'minlength'">
                            最少 {{f.title.errors.minlength.requiredLength}} 个字符
                        </span>
                        <span *ngSwitchCase="'maxlength'">
                            最大 {{f.title.errors.maxlength.requiredLength}} 个字符
                        </span>
                    </div>
                </div>
            </div>
            <input class="uk-input"
                   formControlName="title"
                   id="title"
                   type="text"
                   [class.uk-form-danger]="f.title.errors && f.title.touched"
                   [class.uk-form-success]="!f.title.errors && f.title.touched"
                   placeholder="请输入组件标题">
        </div>
        <div class="uk-margin">
            <div class="uk-form-label uk-flex uk-flex-between">
                <div class="uk-flex uk-flex-between">
                    <label for="componentName">
                        组件名
                    </label>
                    <div *ngIf="f.componentName.errors && f.componentName.touched"
                         class="uk-text-danger"
                         [ngSwitch]="f.componentName.errors | objectFirstKey">
                            <span *ngSwitchCase="'required'">
                                请填写组件名称
                            </span>
                        <span *ngSwitchCase="'pattern'">
                                允许字母、数字及下划线，以字母开头
                            </span>
                        <span *ngSwitchCase="'minlength'">
                                最少 {{f.componentName.errors.minlength.requiredLength}} 个字符
                            </span>
                        <span *ngSwitchCase="'maxlength'">
                                最大 {{f.componentName.errors.maxlength.requiredLength}} 个字符
                            </span>
                        <span *ngSwitchCase="'exist'">
                                该名称已被占用
                            </span>
                    </div>
                </div>
            </div>
            <input class="uk-input"
                   formControlName="componentName"
                   id="componentName"
                   type="text"
                   [class.uk-form-danger]="f.componentName.errors && f.componentName.touched"
                   [class.uk-form-success]="!f.componentName.errors && f.componentName.touched"
                   placeholder="请输入组件名称">
        </div>
        <div class="uk-margin">
            <div class="uk-form-label uk-flex uk-flex-between">
                <div class="uk-flex uk-flex-between">
                    <label>
                        所属分类
                    </label>
                </div>
            </div>
            <div>
                <a uk-icon="icon:plus"
                   href="#tags-modal"
                   uk-toggle></a>
                <div *ngFor="let tag of f.tags.value"
                      class="uk-label uk-label-success uk-margin-small-left">
                    {{tag.name}}
                </div>
            </div>
        </div>
        <div class="uk-grid uk-grid-small">
            <div class="uk-width-2-3">
                <div class="uk-margin">
                    <label class="uk-form-label">发布方式</label>
                    <div class="uk-grid-small uk-child-width-auto uk-grid">
                        <label>
                            <input class="uk-radio"
                                   type="radio"
                                   formControlName="deployType"
                                   [value]="0">
                            <span class="uk-margin-small-left">无</span>
                        </label>
                        <label>
                            <input class="uk-radio"
                                   type="radio"
                                   formControlName="deployType"
                                   [value]="1">
                            <span class="uk-margin-small-left">npm 包</span>
                        </label>
                        <label>
                            <input class="uk-radio"
                                   type="radio"
                                   formControlName="deployType"
                                   [value]="2">
                            <span class="uk-margin-small-left">异步组件</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="uk-width-1-3">
                <div class="uk-margin">
                    <label class="uk-form-label">是否公开？</label>
                    <div class="uk-grid-small uk-child-width-auto uk-grid">
                        <label>
                            <input class="uk-radio"
                                   type="radio"
                                   formControlName="isPublic"
                                   [value]="true">
                            <span class="uk-margin-small-left">是</span>
                        </label>
                        <label>
                            <input class="uk-radio"
                                   type="radio"
                                   formControlName="isPublic"
                                   [value]="false">
                            <span class="uk-margin-small-left">否</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="uk-margin">
            <div class="uk-form-label uk-flex uk-flex-between">
                <div class="uk-flex uk-flex-between">
                    <label for="description">
                        描述说明
                    </label>
                    <div *ngIf="f.description.errors && f.description.touched"
                         class="uk-text-danger">
                        <span *ngIf="f.description.errors.required">请提供组件描述信息</span>
                    </div>
                </div>
            </div>
            <textarea class="uk-textarea"
                      formControlName="description"
                      rows="3"
                      id="description"
                      type="text"
                      [class.uk-form-danger]="f.description.errors && f.description.touched"
                      [class.uk-form-success]="!f.description.errors && f.description.touched"
                      placeholder="请提供描述信息，方便大家更了解你的组件">
            </textarea>
        </div>
        <div class="uk-margin uk-text-center">
            <button type="submit"
                    [disabled]="!mainForm.valid"
                    class="uk-button uk-button-primary uk-button-large uk-width-1-2">
                创建
            </button>
        </div>
    </form>
</div>
<div id="create-project-modal" #createProjectModal uk-modal>
    <div class="uk-modal-dialog uk-width-large">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">新建仓库</h2>
        </div>
        <div class="uk-modal-body">
            <form class="uk-form-stacked"
                  [formGroup]="createProject"
                  (keydown.enter)="$event.preventDefault()">
                <div class="uk-margin">
                    <label class="uk-form-label">所属群组</label>
                    <div class="uk-form-controls">
                        <select class="uk-select"
                                formControlName="namespace_id">
                            <option value="">无</option>
                            <option *ngFor="let option of groups"
                                    [value]="option.id">
                                {{option.full_name}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="uk-margin">
                    <div class="uk-form-label uk-flex uk-flex-between">
                        <div class="uk-flex uk-flex-between">
                            <label for="projectName">
                                仓库名称
                            </label>
                            <div *ngIf="cf.name.errors !== null
                                && cf.name.errors
                                && cf.name.touched"
                                 class="uk-text-danger"
                                 [ngSwitch]="cf.name.errors | objectFirstKey">
                                <span *ngSwitchCase="'required'">
                                     请输入仓库名称
                                </span>
                                <span *ngSwitchCase="'exist'">
                                     仓库名称已经被占用
                                </span>
                                <span *ngSwitchCase="'pattern'">
                                    仓库名称格式不正确
                               </span>
                            </div>
                        </div>
                    </div>
                    <input class="uk-input"
                           formControlName="name"
                           id="projectName"
                           type="text"
                           [class.uk-form-danger]="cf.name.errors && cf.name.touched"
                           [class.uk-form-success]="!cf.name.errors && cf.name.touched"
                           placeholder="仓库名称......">
                </div>
                <div class="uk-margin">
                    <label class="uk-form-label"
                           for="repoDescription">
                        描述说明
                    </label>
                    <textarea class="uk-textarea"
                              formControlName="description"
                              rows="3"
                              id="repoDescription"
                              type="text"
                              placeholder="仓库描述信息......">
                    </textarea>
                </div>
            </form>
        </div>
        <div class="uk-text-right uk-modal-footer">
            <button class="uk-button uk-button-default uk-modal-close uk-margin-small-right"
                    type="button">
                取消
            </button>
            <button class="uk-button uk-button-primary uk-modal-close"
                    [disabled]="!createProject.valid"
                    (click)="createRepo()"
                    type="button">
                创建
            </button>
        </div>
    </div>
</div>
<div id="tags-modal" #tagsModal uk-modal>
    <div class="uk-modal-dialog uk-width-large">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">选择分类</h2>
        </div>
        <div class="uk-modal-body">
            <app-components-tags-render
                    selectMode="multiple"
                    [editorMode]="true"
                    [selectedTags]="f.tags.value"
                    (selectedChange)="f.tags.setValue($event)"
                    [tags]="tagsService.tags">
            </app-components-tags-render>
        </div>
        <div class="uk-text-right uk-modal-footer">
            <button class="uk-button uk-button-primary uk-modal-close"
                    type="button">
                确定
            </button>
        </div>
    </div>
</div>
